<!--  -->
<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div class="search_m" slot="left">欢迎您！</div>
      <div slot="center">
        <input type="text" placeholder="搜索商品" class="search_z">
      </div>
      <div slot="right" class="search_w" @click="test">搜索</div>
    </nav-bar>
    <home-swiper :banners="banners"/>
    <home-recommend-view :recommends="recommends"/>
    <feature/>
    <tab-control class="tab-control" :titles="titles" @tabclick="tabclick"/>
    <goods-list :goods="goods[currentType].list"></goods-list>
    <back-top/>
  </div>
</template>

<script>

import HomeSwiper from "./childComps/HomeSwiper";
import HomeRecommendView from "./childComps/HomeRecommendView";
import Feature from "./childComps/Feature"

import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/content/tabControl/TabControl"
import GoodsList from "components/content/goods/GoodsList"
import BackTop from "components/content/backTop/BackTop"

import { getHomeMultidata,getHomeGoods} from "network/home";

export default {
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommendView,
    Feature,
    TabControl,
    GoodsList,
    BackTop
  },
  data() {
    return {
      banners: [],
      recommends: [],
      titles:['流行',"新款","精选"],
      goods:{
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]},
      },
      currentType:'pop'
    };
  },
  created() {
    //1.请求多个数据
    this.getHomeMultidata();
    //2.请求商品数据
   this.getHomeGoods('pop');
   this.getHomeGoods('new');
   this.getHomeGoods('sell');

  },
  methods:{
    //事件监听
    tabclick(index){
      switch(index){
        case 0:
        this.currentType="pop"
        break
        case 1:
        this.currentType="new"
        break
        case 2:
        this.currentType="sell"
        break
      }
      
    },
    //网络请求
    getHomeMultidata(){
     getHomeMultidata().then(res => {
      this.banners = res.data.banner.list;
      this.recommends = res.data.recommend.list;
      
    })
    },
    getHomeGoods(type){
      const page= this.goods[type].page+1
      getHomeGoods(type,page).then(res=>{
      this.goods[type].list.push(...res.data.list)
      this.goods[type].page+=1  
      
      
    })
    },
    test(){
      let home =document.querySelector("#home").offsetHeight
  console.log(home);
    }
  }
};
</script>
<style scoped>
#home {
  padding-top: 44px;
  /* height: 2000px; */
}
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
.tab-control {
  position: sticky;
  top: 43px;
}
.search_z {
  width: 100%;
  border-radius: 15px;
  font-size: 12px;
  border: 1px solid #fff;
  height: 25px;
  padding-left: 10px;
}
.search_w,
.search_m {
  font-size: 13px;
}
</style>